<template>
	<view class="mainbgc mainpadding">
		<backtop ref="backtops"></backtop>
		<view class="ss flexleft">
			<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
			<input type="text" placeholder="请输入搜索内容" class="inp" confirm-type="search" v-model="keyword"
				@confirm="init()">
		</view>
		<view class="shangpinbox">
			<view class="flexbetween margin_top">
				<view class="flexleft" @click="changezh">
					<view :class="zh_status==0?'nostrongtext':'lansetext'">综合</view>
					<view :class="zh_status==1?'xialjt':'xiahuijt'"></view>
				</view>
				<view class="flexleft" @click="changejg">
					<view :class="price_status==0?'nostrongtext ':'lansetext'">价格</view>
					<view class="trbox">
						<view :class="price_status==1?'shangljt':'shanghuijt'"></view>
						<view :class="price_status==2?'xialjt':'xiahuijt'"></view>
					</view>
				</view>
				<view class="flexleft" @click="changexl">
					<view :class="hot_sort==0?'nostrongtext':'lansetext'">销量</view>
					<view class="trbox">
						<view :class="hot_sort==1?'shangljt':'shanghuijt'"></view>
						<view :class="hot_sort==2?'xialjt':'xiahuijt'"></view>
					</view>
				</view>
				<uni-data-picker @change="bindPickerChange" :localdata="items">
					<view class="flexleft nostrongtext">地区<view class="grey_jiao"></view>
					</view>
				</uni-data-picker>
			</view>
			<view class="flexcenter" style="margin-top: 200rpx;" v-if="!list.data.length">
				<view class="placeimage"></view>
			</view>
			<view class="" v-if="list.data.length">
				<view class="flexbetween flex_wrap">
					<view class="shangpbox relative margin_top" v-for="item in list.data" :key="item.id"
						@click="jumpdetail(item.id)">
						<view class="yxlable" v-show="item.yx_type==1">优选</view>
						<view class="shangptp">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="mainpadding ffffff baibox">
							<view class="ershil lianghang">{{item.title}}</view>
							<view class="flexbetween margin_top">
								<view class="price">￥{{item.price}}</view>
								<view class="nostrongtext">{{item.pay_sales}}人付款</view>
							</view>
						</view>
					</view>
				</view>
				<view class="footertextdaodi">老板！到底没数据了！</view>
			</view>

		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				category_id: "",
				zh_status: 0,
				price_status: 0,
				hot_sort: 0,
				keyword: "",
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				items: [],
			}
		},
		onLoad(options) {
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children.unshift({
						"value": "",
						"text": "不限",
						"pid": ""
					})
				})
				item.children.unshift({
					"value": "",
					"text": "不限",
					"pid": "",
				})
			})
			arr.unshift({
				"value": "",
				"text": "全国",
				"pid": "",
			})
			this.items = arr
			if (options.id) {
				this.category_id = options.id
			}
		},
		onShow() {
			this.init()
		},
		onPageScroll(res) {
			if (res.scrollTop > 700) {
				this.$refs.backtops.isshow = true
			} else {
				this.$refs.backtops.isshow = false
			}
		},
		methods: {
			jumpdetail(id) {
				uni.navigateTo({
					url: "/pages/shopping/shangpinxq?id=" + id
				})
			},
			changezh() {
				this.zh_status = this.zh_status == 0 ? 1 : 0
				this.init()
			},
			changejg() {
				this.price_status = this.price_status == 0 ? 1 : this.price_status == 1 ? 2 : 0
				this.init()
			},
			changexl() {
				this.hot_sort = this.hot_sort == 0 ? 1 : this.hot_sort == 1 ? 2 : 0
				this.init()
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					hot_status: 0,
					zh_status: this.zh_status,
					price_status: this.price_status,
					keyword: this.keyword,
					hot_sort: this.hot_sort,
					category_id: this.category_id,
					send_province_id: this.address.province,
					send_city_id: this.address.city,
					send_area_id: this.address.county
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}

				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				if (area.length == 3) {
					this.area = [area[0].text, area[1].text, area[2].text];
					this.address.province = area[0].value;
					this.address.city = area[1].value;
					this.address.county = area[2].value=="0312"?"":area[2].value;
				} else if (area.length == 2){
					this.area = [area[0].text, area[1].text, "不限"];
					this.address.province = area[0].value;
					this.address.city = area[1].value=="0311"?"":area[1].value;
					this.address.county = ""
				}else{
					this.area = ["全国", "不限", "不限"];
					this.address.province = "";
					this.address.city = "";
					this.address.county = ""
				}
				this.init()
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ershil {
		height: 75rpx;
	}

	.gaoliang {
		padding: 9rpx 43rpx 10rpx 27rpx;
		background-color: RGBA(228, 239, 250, 1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		margin-right: 30rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.bugaoliang {
		padding: 9rpx 43rpx 10rpx 27rpx;
		background-color: #fff;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 30rpx;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
	}

	.ss {
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 18rpx 20rpx 18rpx 60rpx;
	}

	.inp {
		background-color: #f3f3f3;
		width: 500rpx;
		padding: 0rpx 0rpx 0rpx 30rpx;
	}

	// 竖着
	.shujrgwc {
		position: absolute;
		bottom: 30rpx;
		width: 57%;
		right: 30rpx;
	}

	.shuzslu {
		width: 206rpx;
		height: 206rpx;
		border-radius: 11rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx;
		}
	}

	//结束
	// 商品列表样式
	.shangpbox {
		width: 48%;
	}

	.jiagetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	.yhxiank {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}

	.trbox {
		margin-left: 10rpx;
	}


	.focustext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nofocustext {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.sousuobox {
		width: 100%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-sizing: border-box;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}
</style>